<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-item">
        <div class="searchItem">
          <span class="searchLabel">流水日期：</span>
          <DatePicker :mode="1" :startDate.sync="listQuery.startDate" :endDate.sync="listQuery.endDate" clearable />
        </div>
      </div>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
    </div>
    <el-table ref="table" v-loading="listLoading" :data="list" border fit highlight-current-row row-key="id" style="width: 100%;">
      <el-table-column label="序号" type="index" align="center"/>
      <el-table-column label="交易日期" prop="trxDate" align="center" />
      <el-table-column label="订单号" prop="orderNo" align="center">
        <template slot-scope="{row}">
          {{ (row.orderIdentifiers && row.orderIdentifiers.length > 0) ? row.orderIdentifiers[0] : '' }}
        </template>
      </el-table-column>
      <el-table-column label="交易流水号" prop="trxNumber" align="center" />
      <el-table-column label="对方户名" prop="otherAccnoName" align="center" />
      <el-table-column label="交易金额类型" align="center">
        <template slot-scope="{row}">
          <el-tag v-if="row.accType == 1">余额</el-tag>
          <el-tag v-else type="success">在途资金</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="交易金额" prop="amount" align="center">
        <template slot-scope="{row}">
          <div style="color: red" v-if="row.drcrFlag == 1">{{"-" + row.amount}}</div>
          <div v-else>{{row.amount}}</div>
        </template>
      </el-table-column>
      <el-table-column label="余额" prop="ownBalance" align="center" />
      <el-table-column label="在途资金" prop="wayBalance" align="center" />
      <el-table-column label="业务种类" align="center">
        <template slot-scope="{row}">
          {{ row.busType | typeFilter }}
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:30px">
      <el-button v-if="prvePage.length > 0" v-waves class="filter-item" type="primary" icon="el-icon-back" @click="handleQuery(2)">
        上一页
      </el-button>
      <el-button v-if="list.length > 0" v-waves class="filter-item" type="success" icon="el-icon-right" @click="handleQuery(3)">
        下一页
      </el-button>
      </div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
import DatePicker from '@/components/DatePicker'
import { walletQuery } from '@/api/bank'

export default {
  name: 'flow',
  directives: { waves },
  props: {},
  components: {
    Pagination,
    DatePicker
  },
  filters: {
    typeFilter(status) {
      const statusMap = {
        '1': '预存',
        '2': '预存资金支付',
        '3': '结算账户支付',
        '4': '确认收货',
        '5': '退款',
        '6': '提现',
        '7': '佣金收取',
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        startDate: '',
        endDate: '',
        initFlag: 1,
        pageCount: 39,
        pageTurn: "",
      },
      prvePage:[]
    }
  },
  computed: {},
  watch: {},
  methods: {
    getList() {
      if (!this.listQuery.startDate || !this.listQuery.endDate) {
        this.$message.error("请选择流水日期")
        return
      }
      
      this.listLoading = true
      walletQuery(this.listQuery).then(response => {
        this.list = response || []
        this.listLoading = false
      }).catch(error => {
        console.log(error);
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.initFlag = 1
      this.$set(this.listQuery, 'pageTurn', '')
      this.prvePage = []
      this.getList()
    },
    handleQuery(flag) {
      this.listQuery.initFlag = flag
      if (flag == 2) { // 上一页
        console.log(222,this.prvePage);
        if (this.prvePage.length > 0) {
          let index = this.prvePage.length - 1
          let pageTurn = this.prvePage[index]
          this.$set(this.listQuery, 'pageTurn', pageTurn)
          this.prvePage.pop()
        } 
      } else {
        this.prvePage.push(this.list[0].pageTurn)
        let index = this.list.length - 1
        this.$set(this.listQuery, 'pageTurn', this.list[index].pageTurn)
      }
      this.getList()
    }
  },
  created() {
    // this.getList()
  },
  mounted() {
    
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang='scss' scoped>
  .searchItem {
    display: flex;
    align-items: center;
    .searchLabel {
      color: #666;
    }
  }
</style>